<template>
  <t-table
    row-key="id"
    table-layout="auto"
    :data="taxStore.getList()"
    :columns="columns"
    :loading="loading"
    hover
  >
    <template #name="{ row }">
      <b>{{ row.name }}</b>
    </template>
    <template #iva="{ row }">
      {{ row.iva }}%
    </template>
    <template #req="{ row }">
      {{ row.req }}%
    </template>
    <template #law="{ row }">
      <t-tag v-if="Number(row.iva) == 0" theme="primary" variant="outline">{{ plugin.t('tax.law_text.' + row.law) }}</t-tag>
    </template>
    <template #sort="{ row }">
      <t-tag theme="primary" variant="light">{{ row.sort }}</t-tag>
    </template>
    <template #right="{ row }">
      <t-button theme="primary" variant="text" @click="() => emit('update', row)">{{ $t('common.update') }}</t-button>
      <t-popconfirm 
        theme="warning" 
        :content="$t('message.confirm.delete')" 
        @confirm="onDelete(row)"
      >
        <t-button theme="warning" variant="text">{{ $t('common.delete') }}</t-button>
      </t-popconfirm>
    </template>
  </t-table>
</template>
<script setup>
  import { ref } from 'vue'
  import app from '@/app'
  import index from '../../index'
  import taxStore from '../../store/tax'

  const emit = defineEmits(['delete', 'update'])
  const plugin = index.plugin
  const columns = [{
    title: plugin.t('tax.sort'),
    colKey: 'sort',
    cell: 'sort'
  }, {
    title: plugin.t('tax.name'),
    colKey: 'name',
    cell: 'name'
  }, {
    title: plugin.t('tax.iva'),
    colKey: 'iva',
    align: 'center',
    cell: 'iva'
  }, {
    title: plugin.t('tax.req'),
    colKey: 'req',
    align: 'center',
    cell: 'req'
  }, {
    title: plugin.t('tax.law'),
    colKey: 'law',
    cell: 'law'
  }, {
    colKey: 'right',
    align: 'right',
    cell: 'right'
  }]

  const loading = ref(true)
  taxStore.get().finally(() => {
    loading.value = false
  })

  // 删除
  const onDelete = row => {
    loading.value = true
    taxStore.del(row.id).then(res => {
      app.message('success', 'message.' +  res.message)
    }).catch(res => {
      app.message('error', 'message.error.' + res.message)
    }).finally(() => {
      loading.value = false
    })
  }
</script>